<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set">
<link ref="help" href="https://xhr.spec.whatwg.org/#dom-formdata">
<link rel="help" href="https://fetch.spec.whatwg.org/#concept-bodyinit-extract">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/targetted-form.js"></script>

<iframe name="frame1" id="frame1"></iframe>
<form accept-charset="iso-8859-1" target="frame1" action="/common/blank.html" id="form1">
  <input type="hidden" name="_charset_">
</form>

<iframe name="frame2" id="frame2"></iframe>
<form target="frame2" action="/common/blank.html" id="form2">
  <input type="text" name="foo">
  <button type="close" name="close" value="true">close</button>
  <button type="button" name="button" value="true">button</button>
  <button type="reset" name="reset" value="true">reset</button>
  <button type="submit" name="submit" value="true">submit</button>
</form>

<script>

const form1 = document.getElementById('form1'),
      form2 = document.getElementById('form2'),
      frame1 = document.getElementById('frame1'),
      frame2 = document.getElementById('frame2');

test(() => {
  const formData = new FormData(form1);
  assert_equals(formData.get('_charset_'), 'UTF-8');
}, 'FormData constructor always produces UTF-8 _charset_ value.');

async_test(t => {
  frame1.onload = t.step_func(() => {
    if (frame1.contentWindow.location.href == "about:blank") { return; }
    assert_not_equals(frame1.contentDocument.URL.indexOf('_charset_=windows-1252'), -1,"should see _charset_=windows-1252 in "+frame1.contentDocument.URL);
    t.done();
  });
  form1.submit();
},'_charset_ control sets the expected encoding name.');

async_test(t => {
  frame2.onload = t.step_func_done(() => {
    assert_equals(frame2.contentDocument.URL.split("?")[1], 'foo=&submit=true');
  });
  form2.submit.click();
}, 'The button cannot be setted if it is not a submitter.');

test(() => {
  let didCallHandler = false;
  let wasBubbles = false;
  let wasCancelable = true;
  let form = populateForm();
  document.addEventListener('formdata', e => {
    didCallHandler = true;
    wasBubbles = e.bubbles;
    wasCancelable = e.cancelable;
  });
  new FormData(form);
  assert_true(didCallHandler);
  assert_true(wasBubbles);
  assert_false(wasCancelable);
}, '"formdata" event bubbles, and is not cancelable.');

test(() => {
  let didCallHandler = false;
  let form = populateForm();
  let orphanRoot = document.createElement('div');
  orphanRoot.appendChild(form);
  orphanRoot.addEventListener('formdata', e => {
    didCallHandler = true;
  });
  new FormData(form);
  assert_true(didCallHandler);
}, '"formdata" event bubbles in an orphan tree.');

for (const enctype of ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]) {
  test((t) => {
    let form = populateForm('<input name=file type=file><input name=empty type=file>');
    form.enctype = enctype;

    const file = new File([], "filename");
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    form.querySelector('input[name=file]').files = dataTransfer.files;

    form.addEventListener('formdata', t.step_func(e => {
      assert_true(e.formData.has('file'));
      assert_equals(e.formData.get('file'), file);
      assert_true(e.formData.has('empty'));
      assert_true(e.formData.get('empty') instanceof File);
    }));
    form.submit();
  }, `Files in a ${enctype} form show up as File objects in the "formData" IDL attribute`);
}

test(() => {
  let listener1ok = false;
  let listeern2ok = false;
  let form = populateForm('<input name=n1 value=v1>');
  form.addEventListener('formdata', e => {
    listener1ok = e.formData.get('n1') == 'v1';
    e.formData.append('h1', 'vh1');
    e.formData.append('h2', 'vh2');
  });
  form.addEventListener('formdata', e => {
    if (e.formData.get('h1') == 'vh1' && e.formData.get('h2') == 'vh2')
      listener2ok = true;
  });
  form.submit();
  assert_true(listener1ok);
  assert_true(listener2ok);
}, '"formData" IDL attribute should have entries for form-associated elements' +
     ' in the first event handler, and the second handler can read entries ' +
     'set by the first handler.');

let t1 = async_test('Entries added to "formData" IDL attribute should be submitted.');
t1.step(() => {
  let form = populateForm('<input name=n1 value=v1>');
  form.addEventListener('formdata', e => {
    e.formData.append('h1', 'vh1');
  });
  let iframe = form.previousSibling;
  iframe.onload = t1.step_func(() => {
    // The initial about:blank load event can be fired before the form navigation occurs.
    // See https://github.com/whatwg/html/issues/490 for more information.
    if (iframe.contentWindow.location.href == "about:blank") { return; }
    assert_true(iframe.contentWindow.location.search.indexOf('n1=v1&h1=vh1') != -1);
    t1.done();
  });
  form.submit();
});

test(() => {
  const form = populateForm('');
  form.addEventListener('formdata', e => {
    e.formData.append('a\nb', 'c\rd');
  });
  const formData = new FormData(form);
  const [name, value] = [...formData][0];
  assert_equals(name, 'a\nb');
  assert_equals(value, 'c\rd');
}, 'Entries added to the "formdata" IDL attribute shouldn\'t be newline normalized in the resulting FormData');

test(() => {
  let form = populateForm('<input name=n1 value=v1><button type=submit name=n2 value=v2></button>');
  let formDataInEvent = null;
  let submitter = form.querySelector('button[type=submit]');
  form.addEventListener('submit', e => {
    e.preventDefault();
    formDataInEvent = new FormData(e.target);
  });

  submitter.click();
  assert_equals(formDataInEvent.get('n1'), 'v1');
  assert_false(formDataInEvent.has('n2'));
}, 'The constructed FormData object should not contain an entry for the submit button that was used to submit the form.');

test(() => {
  let form = populateForm('<input name=n1 value=v1><input type=image name=n2>');
  let formDataInEvent = null;
  let submitter = form.querySelector('input[type=image]');
  form.addEventListener('submit', e => {
    e.preventDefault();
    formDataInEvent = new FormData(e.target);
  });

  submitter.click();
  assert_equals(formDataInEvent.get('n1'), 'v1');
  assert_false(formDataInEvent.has('n2.x'));
  assert_false(formDataInEvent.has('n2.y'));
}, 'The constructed FormData object should not contain an entry for the image submit button that was used to submit the form.');
</script>
